<template>
  <div id="app" class="app">
    <header class="page-header canary-theme">
      <div class="page-header-left" @click="goBack">
        <span class="page-header-back"></span>
      </div>
      <div class="page-header-title line-ellipsis">
        {{ ticketCinemaInfo.name }}
      </div>
      <div class="page-header-right"></div>
    </header>
    <MovieAd text="19.9元起购" />
    <div class="cinema-block">
      <div class="cinema-info" v-if="ticketCinemaInfo">
        <div class="title line-ellipsis">{{ ticketCinemaInfo.name }}</div>
        <div class="location line-ellipsis">
          {{ ticketCinemaInfo.address }}
        </div>
        <div class="location-icon border-1px-l">
          <img
            src="https://obj.pipi.cn/festatic/fe-trade/public/img/position.ee111616.png"
          />
        </div>
      </div>
    </div>

    <div class="movie-block">
      <div
        v-if="ticketFilmList"
        class="
          swiper-container
          swiper-container-initialized
          swiper-container-horizontal
          swiper-container-ios
        "
        style="padding: 0"
      >
        <div
          class="post-bg"
          :style="
            'background-image: url(' +
            ticketFilmList[film_current].poster +
            ');'
          "
        ></div>
        <div class="post-bg-filter"></div>
        <swiper
          :options="swiperOption"
          @click-slide="handleClickSlide"
          @slideChange="sliderHandler"
          ref="mySwiper"
        >
          <swiper-slide v-for="i in ticketFilmList" :key="i.filmId">
            <div
              class="post image-fade-in div-3Cvbv"
              :style="'background-image: url(' + i.poster + ')'"
            ></div>
          </swiper-slide>
        </swiper>
      </div>

      <div class="movie-info-container" v-if="ticketFilmList">
        <div class="movie-info">
          <div class="movie-title line-ellipsis">
            <span class="title">{{ ticketFilmList[film_current].name }}</span
            ><span class="grade"
              ><span class="score"
                >{{ ticketFilmList[film_current].grade
                }}<span class="small">分</span></span
              ></span
            >
          </div>
          <div class="movie-desc line-ellipsis">
            {{ ticketFilmList[film_current].runtime + "分钟" }}
            {{ ticketFilmList[film_current].category }}
            {{ ticketFilmList[film_current].director.replace(/\|/g, ",") }}
          </div>
        </div>
      </div>
    </div>

    <div class="show-wrap">
      <van-tabs
        title-class="day"
        @click="reRenderCinema"
        :line-width="103"
        :line-height="2"
        title-active-color="#f03d37"
        :ellipsis="false"
      >
        <van-tab
          v-for="(i, index) in showDate"
          :key="index"
          :title="(i * 1000) | setshowDate"
          title-style="padding:0 19px"
        >
        </van-tab>
      </van-tabs>

      <div class="activity-block-container">
        <div class="activity-section">
          <div class="vip-tips">
            <a href="#"
              ><div class="label">折扣</div>
              <div class="label-text line-ellipsis">
                现在开卡，首单1张票最高立减6元
              </div>
              <div class="process">17.9元起开卡</div></a
            >
            <div class="lazyload-wrapper"><div></div></div>
          </div>
        </div>
      </div>

      <div class="show-list-container" v-if="renderCinemaList.length > 0">
        <div
          class="show-item-wrap border-1px-t"
          v-for="(i, index) in renderCinemaList"
          :key="index"
        >
          <div class="show-item">
            <div class="time-block">
              <div class="begin">{{ i.showAt | setTimer_filter }}</div>
              <div class="end">
                {{ i.endAt | setTimer_filter }}<span class="tui">散场</span>
              </div>
              <div class="tag-wrapper-other"></div>
            </div>
            <div class="info-block">
              <div class="lan">{{ i.filmLanguage }} {{ i.imagery }}</div>
              <div class="hall">{{ i.hallName }}</div>
            </div>
            <div class="price">
              <div class="sellPr">
                <span class="d">￥</span
                ><span
                  ><span class="stonefont">{{
                    i.marketPrice / 100
                  }}</span></span
                >
              </div>
              <div class="vipPrice">
                <span class="icon">折扣卡</span
                ><span class="num">￥{{ i.minSalePrice / 100 }}</span>
              </div>
              <div class="extraDesc">折扣卡首单特惠</div>
            </div>
            <div class="button-block"><div class="button">购票</div></div>
          </div>
          <div class="lazyload-wrapper"><div></div></div>
        </div>
      </div>

      <div class="show-list-container" v-else>
        <div class="emty">
          <img
            style="width: 70px; height: 70px"
            src="https://assets.maizuo.com/h5/v5/public/app/img/emptyFilmList.4e4721ad.png"
            alt=""
          />
          <span>暂无场次</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MovieAd from "../movie/movie_ad.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// import "swiper/css/swiper.css";
import "swiper/swiper-bundle.css";
// import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
import http from "../../utils/htttp";
import * as moment from "moment";
moment.locale(["zh-cn", "zh-tw"]);
import Vue from "vue";
import { Tab, Tabs, Toast } from "vant";
Vue.use(Tab).use(Tabs).use(Toast);
export default {
  filters: {
    setshowDate(timer) {
      let initTime =
        moment(timer).format("dddd") + moment(timer).format("MMMDo");
      return initTime.replace(/星期/g, "周");
    },
    setTimer_filter(timer) {
      return moment(timer * 1000).format("LT");
    },
  },
  components: {
    MovieAd,
    Swiper,
    SwiperSlide,
  },
  data() {
    let vm = this;
    return {
      swiperOption: {
        slidesPerView: 4,
        initialSlide: vm.initIndex,
        // initialSlide: 1,

        spaceBetween: 0,
        slideToClickedSlide: true,
        centeredSlides: true,
        on: {
          //监听slide划动事件
          slideChangeTransitionStart() {
            vm.film_current = this.activeIndex;
            vm.showDate = vm.ticketFilmList[this.activeIndex].showDate;
          },
        },
        // spaceBetween: 30,
      },
      cinemaId: 0,
      filmId: 0,
      ticketCinemaInfo: {},
      ticketFilmList: null,
      film_current: 0,
      showDate: [],
      renderCinemaList: [],
      initIndex: 0,
    };
  },
  async created() {
    this.cinemaId = this.$route.params.cinemaId;

    this.ticketCinemaInfo = await this.getTicketCinema();
    this.ticketFilmList = await this.getTicketFilm();
    (this.filmId =
      this.$route.params.filmId ||
      this.ticketFilmList[this.film_current].filmId),
      (this.initIndex = this.getInitIndex());
    this.swiperOption.initialSlide = this.initIndex;
    this.showDate = this.ticketFilmList[this.film_current].showDate;
    this.renderCinemaList = await this.getRenderCiname();
  },
  async mounted() {
    this.setBodyStyle();
    // console.log(this.swiperOption.initialSlide=2);
  },
  methods: {
    //获取swiper初始下标
    getInitIndex() {
      let index;
      let len = this.ticketFilmList.length;
      for (let i = 0; i < len; i++) {
        if (this.ticketFilmList[i].filmId == this.$route.params.filmId) {
          index = i;
          break;
        }
      }
      return index;
    },
    //返回上一页面
    goBack() {
      this.$router.go(-1);
    },
    //设置body样式
    setBodyStyle() {
      document.querySelector("body").className =
        "page-cinema-cinema_body page-cinema-cinema";
      // document.querySelector("body").style.overflow = "auto";
      // document.querySelector("body").style.background = "#fff";
    },
    //获取影院信息
    getTicketCinema() {
      return new Promise((res) => {
        http("/ticketcinema", {
          params: {
            cinemaId: this.cinemaId,
          },
        }).then((data) => res(data.data.data.cinema));
      });
    },
    //获取影片信息
    getTicketFilm() {
      return new Promise((res) => {
        http("/ticketfilm", {
          params: {
            cinemaId: this.cinemaId,
          },
        }).then((data) => res(data.data.data.films));
      });
    },
    //swiper_slide点击事件
    handleClickSlide(index) {
      this.reRenderCinema(0);
    },
    //swiper_slide划动事件
    sliderHandler() {
      this.reRenderCinema(0);
    },
    //获取要渲染的影院详情
    getRenderCiname() {
      return new Promise((res) => {
        http("ticketrendercinema", {
          params: {
            filmId: this.ticketFilmList[this.film_current].filmId,
            cinemaId: this.cinemaId,
            date: this.showDate[this.film_current],
          },
        }).then((data) => {
          if (data.data.data) {
            res(data.data.data.schedules);
          } else {
            res([]);
          }
        });
      });
    },
    //重新获取要渲染的影院详情
    reRenderCinema(index) {
      http("ticketrendercinema", {
        params: {
          filmId: this.ticketFilmList[this.film_current].filmId,
          cinemaId: this.cinemaId,
          date: this.showDate[index],
        },
      }).then((data) => {
        if (data.data.data) {
          this.renderCinemaList = data.data.data.schedules;
        } else {
          this.renderCinemaList = [];
        }
      });
    },
  },
};
</script>
<style>
.page-cinema-cinema_body {
  overflow: auto;
  background-color: #fff !important;
}
.emty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* // height: 190px; */
  margin-top: 50px;
}
.myui-modal {
  font-family: PingFangSC-Regular;
  color: #333;
}
.myui-modal .am-modal-content {
  border-radius: 15px;
  padding-top: 21px;
}
.myui-modal .am-modal-close {
  right: 21px;
  z-index: 999;
  height: 13px;
  width: 13px;
}
.myui-modal .am-modal-close-x {
  width: 12px;
  height: 12px;
}
.myui-modal .am-modal-header {
  padding: 0 21px 6px;
}
.myui-modal .am-modal-header .am-modal-title {
  font-family: PingFangSC-Medium;
  font-size: 17px;
  line-height: 24px;
  color: #333;
  font-weight: 700;
}
.myui-modal .am-modal-header .am-modal-title .icon-fail-sm,
.myui-modal .am-modal-header .am-modal-title .icon-success-sm {
  width: 32px;
  height: 32px;
  margin: 0 auto 6px;
  background-size: 100%;
}
.myui-modal .am-modal-header .am-modal-title .icon-success-sm {
  background-image: url("");
}
.myui-modal .am-modal-header .am-modal-title .icon-fail-sm {
  background-image: url("");
}
.myui-modal .am-modal-header .am-modal-title .icon-fail-lg,
.myui-modal .am-modal-header .am-modal-title .icon-success-lg {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  background-size: 100%;
}
.myui-modal .am-modal-header .am-modal-title .icon-success-lg {
  background-image: url("");
}
.myui-modal .am-modal-header .am-modal-title .icon-fail-lg {
  background-image: url("");
}
.myui-modal .am-modal-body {
  font-family: PingFangSC-Regular;
  text-align: center;
  font-size: 0;
}
.myui-modal .am-modal-body .title-desc {
  font-size: 14px;
  color: #333;
  height: 100%;
  line-height: 24px;
  margin: 0 21px 18px;
}
.myui-modal.am-modal-transparent .am-modal-content .am-modal-body {
  padding: 0;
}
.myui-modal .am-modal-button-group-h .am-modal-button {
  font-size: 17px;
  color: #333;
  font-family: PingFangSC-Regular;
}
.myui-modal .am-modal-button-group-v .am-modal-button {
  font-size: 17px;
  color: #000;
  font-family: PingFangSC-Regular;
}
.div-3Cvbv {
  width: 100%;
  height: 100%;
}
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA")
    format("woff");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: initial;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translateZ(0);
}
.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-container-3d {
  perspective: 1200px;
}
.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.5), transparent);
}
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent);
}
.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
}
.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
}
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
:root {
  --swiper-navigation-size: 44px;
}
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(var(--swiper-navigation-size) * -1 / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: normal;
  line-height: 1;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: "prev";
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: "next";
}
.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white {
  --swiper-navigation-color: #fff;
}
.swiper-button-next.swiper-button-black,
.swiper-button-prev.swiper-button-black {
  --swiper-navigation-color: #000;
}
.swiper-button-lock {
  display: none;
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: opacity 0.3s;
  transform: translateZ(0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}
.swiper-container-vertical
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}
.swiper-container-vertical
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-container-vertical
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  display: inline-block;
  transition: transform 0.2s, top 0.2s;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 4px;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  transition: transform 0.2s, left 0.2s;
}
.swiper-container-horizontal.swiper-container-rtl
  > .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  transition: transform 0.2s, right 0.2s;
}
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-container-rtl
  .swiper-pagination-progressbar
  .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-container-horizontal
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-container-vertical > .swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-white {
  --swiper-pagination-color: #fff;
}
.swiper-pagination-black {
  --swiper-pagination-color: #000;
}
.swiper-pagination-lock {
  display: none;
}
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s linear infinite;
  box-sizing: border-box;
  border-radius: 50%;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-top: 4px solid transparent;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  to {
    transform: rotate(1turn);
  }
}
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube {
  overflow: visible;
}
.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next + .swiper-slide,
.swiper-container-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0;
}
.swiper-container-flip {
  overflow: visible;
}
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.loader-2jlM6 {
  text-align: center;
  line-height: 40px;
}
.loaderImg-3h1xW {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/loading.02f43c10.png)
    no-repeat 50%;
  background-size: 20px;
  -webkit-animation: loader-2jlM6 1.2s linear;
  animation: loader-2jlM6 1.2s linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes loader-2jlM6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
@keyframes loader-2jlM6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
.panel {
  background-color: #fff;
  margin: 0 0 0.2rem;
  border-top: 1px solid #e6e6e6;
}
.panel,
.panel .panel-title {
  border-bottom: 1px solid #e6e6e6;
}
.panel .panel-title {
  line-height: 1;
  padding: 0.26rem 0;
  margin: 0 0.26rem;
  color: #666;
  font-size: 0.28rem;
}
.panel .panel-content {
  padding: 0 0.3rem;
  overflow: hidden;
}
.img-2EOcp {
  width: 100%;
  height: 100%;
}
div.preview-img-container {
  position: fixed !important;
  z-index: 2;
  left: 0;
  top: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
div.preview-img-container .carousel-wrapper {
  width: 100%;
  font-size: 0;
}
div.preview-img-container .carousel-wrapper .img-desc {
  text-align: center;
  padding: 4px 3px;
  background-color: #e0e0e0;
  font-size: 0.28rem;
  line-height: 1;
  color: #333;
}
div.preview-img-container .carousel-wrapper .pagination {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 0.4rem;
  margin-top: 0.3rem;
}
.download-wrap {
  height: 60px;
  background: hsla(0, 0%, 93.7%, 0.9);
}
.download-wrap.disappear {
  display: none;
  height: 0;
}
.download-wrap .download-header-new {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 60px;
  background-color: #fff;
}
.download-wrap .download-header-new .logo-link {
  display: inline-block;
  margin: 10px;
}
.download-wrap .download-header-new .logo-link .logo-img {
  width: 94px;
  height: 39px;
}
.download-wrap .download-header-new .app-benefit {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: right;
  font-weight: 400;
  font-size: 12px;
  color: #666;
}
.download-wrap .download-header-new .app-benefit .benefit-link-text {
  display: inline;
  color: inherit;
  font-family: PingFangSC-Regular, Arial, Helvetica, sans-seri;
  font-weight: 620;
  font-size: 13px;
}
.download-wrap .download-header-new .app-benefit .benefit-link-img {
  display: block;
  float: right;
}
.download-wrap .download-header-new .app-benefit .benefit-img {
  width: auto;
}
.download-wrap .download-header-new .message-split {
  width: 1px;
  height: 13px;
  margin: 0 10px;
  background: rgba(0, 0, 0, 0.1);
}
.download-wrap .download-header-new .download-maoyan-app {
  position: relative;
  margin-right: 13px;
  padding-right: 11px;
  font-family: PingFangSC-Medium;
  font-weight: 700;
  font-size: 14px;
  color: #b37e7e;
}
.download-wrap .download-header-new .download-maoyan-app:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  background: url("")
    no-repeat 100%;
  background-size: contain;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.download-wrap .tip-open-app {
  position: fixed;
  bottom: 120px;
  right: 0;
  display: none;
  width: 110px;
  height: 38px;
  line-height: 38px;
  z-index: 10;
  opacity: 0.94;
  background-image: -webkit-linear-gradient(316deg, #fb3333, #ff5269 75%);
  background-image: linear-gradient(134deg, #fb3333, #ff5269 75%);
  box-shadow: 0 2px 4px 0 rgba(160, 44, 41, 0.15);
  border-radius: 20px 0 0 20px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.download-wrap .tip-open-app.appear {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.download-wrap .tip-open-app.disappear {
  display: none;
}
.download-wrap .tip-open-app div {
  color: #fff;
  margin-left: 5px;
  font-size: 14px;
}
.download-wrap .tip-open-app img {
  width: 23px;
  height: 23px;
}
.border-bottom-2udlf {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  content: "";
  background: #ddd8ce;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.border-tb-QLCnz {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 200%;
  width: 200%;
  border-bottom: 1px solid #ddd8ce;
  border-top: 1px solid #ddd8ce;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.list-Kpe4V {
  background-color: #fff;
  margin-top: 0.2rem;
  margin-bottom: 0;
  position: relative;
  border: none;
}
.list-Kpe4V.list-Kpe4V:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 200%;
  width: 200%;
  border-bottom: 1px solid #ddd8ce;
  border-top: 1px solid #ddd8ce;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.list-Kpe4V:first-of-type {
  border-top: none;
  margin-top: 0;
}
.list-Kpe4V .list-item-1aDpF {
  padding-left: 0.29rem;
  position: relative;
  border: none;
}
.list-Kpe4V .list-item-1aDpF > * {
  padding-left: 0;
}
.list-Kpe4V .list-item-1aDpF:not(:last-child):after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  content: "";
  background: #ddd8ce;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.list-Kpe4V > div {
  position: relative;
  border: none;
}
.list-Kpe4V > div:not(:last-child):after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  content: "";
  background: #ddd8ce;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.dealcard-mFVPq {
  position: relative;
  box-sizing: border-box;
  padding: 0.2rem;
}
.dealcard-left-3UAgz {
  width: 1.44rem;
  height: 1.44rem;
  position: absolute;
  text-align: center;
}
.dealcard-right-NkmEw {
  margin-left: 2rem;
  position: relative;
  height: 1.64rem;
}
.second-title-1QLKU {
  height: 0.68rem;
  margin-bottom: 0.16rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.24rem;
  color: #999;
  line-height: 1.41;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealcard-brand-1E01L {
  padding-top: 0.1rem;
  margin-bottom: 0.12rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  line-height: 1;
}
.first-title-F9pPw {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  font-size: 0.32rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-right-19gh8 {
  position: relative;
  bottom: 0.1rem;
  font-size: 0.24rem;
  color: #333;
}
.padding-left-1JZ5p {
  padding-left: 0.3rem;
}
.padding-34DKo {
  padding: 0.28rem 0.2rem 0.28rem 0.3rem;
}
.single-line-26hnf {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-title-1POUB {
  font-size: 0.28rem;
  color: #333;
  letter-spacing: 0;
  line-height: 0.4rem;
  font-weight: 700;
  height: 0.4rem;
  padding: 0.26rem 0;
}
.color-ok-Qxhhl {
  color: #6bbd00 !important;
}
.btn-weak-2UYXD {
  display: inline-block;
  margin-top: 0;
  margin-right: 0.3rem;
  color: #ef4238;
  height: 0.48rem;
  width: 1.2rem;
  font-size: 0.24rem;
  letter-spacing: 0;
  line-height: 0.48rem;
  padding: 0;
  border: 1px solid #e54847;
  text-align: center;
  border-radius: 3px;
}
.text-icon-1NP-v {
  font-size: 0.26rem;
  margin-right: 0.2rem;
  display: inline-block;
  width: 0.3rem;
  background-size: 100%;
  background-repeat: no-repeat;
  vertical-align: middle;
  height: 0.36rem;
}
.text-icon-1NP-v.support-refund-icon-13Lq5 {
  background-image: url("");
}
.text-icon-1NP-v.valid-time-support-refund-icon-1GYhl {
  background-image: url("");
}
.text-icon-1NP-v.not-support-refund-icon-1I-TJ {
  background-image: url("");
}
.imeituan-color-3mRjI,
.meituan-color-3SHWp {
  color: #06c1ae;
}
.dianping-color-3yzBq,
.dpmweb-color-YTf3z,
.mdianping-color-2nI2Q {
  color: #f63;
}
.gewara-color-23-Px {
  color: #ff5200;
}
.action-sheet .msg-slideup {
  -webkit-animation-name: slideup;
  animation-name: slideup;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}
@-webkit-keyframes slideup {
  0% {
    -webkit-transform: translateY(100%);
  }
  40% {
    -webkit-transform: translateY(-10%);
  }
  to {
    -webkit-transform: translateY(0);
  }
}
@keyframes slideup {
  0% {
    -webkit-transform: translateY(100%);
  }
  40% {
    -webkit-transform: translateY(-10%);
  }
  to {
    -webkit-transform: translateY(0);
  }
}
.action-sheet .msg-slidedown {
  -webkit-animation-name: slidedown;
  animation-name: slidedown;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes slidedown {
  0% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10%);
  }
  to {
    -webkit-transform: translateY(100%);
  }
}
@keyframes slidedown {
  0% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10%);
  }
  to {
    -webkit-transform: translateY(100%);
  }
}
.action-sheet .fadeout {
  -webkit-animation-name: fadeout;
  animation-name: fadeout;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.action-sheet .msg-mask {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}
.action-sheet .msg {
  position: fixed;
  left: 0.16rem;
  right: 0.16rem;
  border-radius: 0.06rem;
  z-index: 3;
  bottom: 0.5rem;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  background: 0 0;
}
.action-sheet .msg .msg-title {
  padding: 0.28rem;
  font-size: 0.34rem;
  color: #333;
  background-color: #fff;
  border-radius: 0.06rem 0.06rem 0 0;
}
.action-sheet .msg .msg-btn {
  display: inline-block;
  width: 100%;
  color: #2bb2a3;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  background-color: #fff;
}
.action-sheet .msg .msg-options .msg-btn:last-child {
  border-radius: 0 0 0.06rem 0.06rem;
}
.action-sheet .msg .msg-cancel {
  padding: 0;
  margin-top: 0.14rem;
  border-radius: 0.06rem;
  background-color: #fff;
}
.page-cinema-cinema .movie-block {
  overflow: hidden;
}
.page-cinema-cinema .swiper-container {
  padding: 20px 15px 20px 5px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.page-cinema-cinema .swiper-container .swiper-slide:first-child {
  margin-left: 10px;
}
.page-cinema-cinema .swiper-container .post-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: contain;
  -webkit-filter: blur(30px);
  filter: blur(30px);
  background-position-y: 40%;
  background-size: 100%;
  overflow: hidden;
  z-index: -1;
  -webkit-transition: all 0 ease-in 0.1s;
  transition: all 0 ease-in 0.1s;
}
.page-cinema-cinema .swiper-container .post-bg-filter {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #40454d;
  opacity: 0.55;
}
.page-cinema-cinema .movie-block .swiper-container .swiper-wrapper {
  height: 95px !important;
}
.page-cinema-cinema .swiper-container .swiper-wrapper .swiper-slide {
  width: 65px !important;
  height: 95px;
  margin-left: 15px;
  box-sizing: initial;
}
.page-cinema-cinema
  .swiper-container
  .swiper-wrapper
  .swiper-slide.swiper-slide-active {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  border: 2px solid #fff;
}
.page-cinema-cinema .swiper-container .swiper-wrapper .swiper-slide .post {
  background-color: #f5f5f5;
  opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-cinema-cinema .swiper-container .swiper-wrapper .swiper-slide .normal {
  position: absolute;
  width: 25px;
  height: 25px;
  top: -2px;
  right: -2px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/tag_sale_triangle.ada9b215.png);
}
.page-cinema-cinema
  .swiper-container
  .swiper-wrapper
  .swiper-slide-active:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 10px;
  height: 5px;
  background: url()
    no-repeat;
  background-size: contain;
}
.page-cinema-cinema .movie-info-container {
  height: 66.5px;
  background-color: #fff;
}
.page-cinema-cinema .movie-info-container .movie-info {
  padding: 11px 15px;
  text-align: center;
}
.page-cinema-cinema .movie-info-container .movie-info .movie-title {
  height: 24px;
  line-height: 24px;
  font-size: 17px;
  color: #333;
  font-weight: 700;
}
.page-cinema-cinema .movie-info-container .movie-info .movie-title .title {
  margin-right: 5px;
}
.page-cinema-cinema .movie-info-container .movie-info .movie-title .grade {
  color: #ffb400;
  font-size: 16px;
}
.page-cinema-cinema .movie-info-container .movie-info .movie-title .small {
  font-size: 10px;
}
.page-cinema-cinema .movie-info-container .movie-info .movie-desc {
  margin-top: 2px;
  height: 18.5px;
  line-height: 18.5px;
  font-size: 13px;
  color: #999;
}
.page-cinema-cinema .show-item-wrap {
  padding: 17px 12.5px;
}
.page-cinema-cinema .show-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.page-cinema-cinema .show-item .time-block {
  position: relative;
}
.page-cinema-cinema .show-item .time-block .begin {
  font-size: 20px;
  color: #333;
  line-height: 1;
  white-space: nowrap;
}
.page-cinema-cinema .show-item .time-block .end {
  margin-top: 10px;
  color: #999;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.page-cinema-cinema .show-item .info-block {
  margin-left: 17px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.page-cinema-cinema .show-item .info-block .lan {
  margin-top: 2px;
  line-height: 18px;
  font-size: 13px;
  color: #333;
  white-space: normal;
}
.page-cinema-cinema .show-item .info-block .hall {
  margin-top: 7px;
  font-size: 11px;
  color: #999;
  white-space: normal;
}
.page-cinema-cinema .show-item .price {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 130px;
  margin-left: 5px;
}
.page-cinema-cinema .show-item .price .sellPr {
  display: inline-block;
  line-height: 1;
  color: #f03d37;
  margin-top: 1px;
  font-size: 19px;
}
.page-cinema-cinema .show-item .price .sellPr .d {
  font-size: 11px;
}
.page-cinema-cinema .show-item .price .sellPr.smallFont {
  font-size: 15px;
}
.page-cinema-cinema .show-item .price .sellPr.smallFont .d {
  font-size: 10px;
}
.page-cinema-cinema .show-item .price .vipPrice {
  display: inline-block;
  line-height: 15px;
  height: 15px;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transform-origin: left;
  transform-origin: left;
  margin: 0 -16px 0 4px;
  border: 1px solid #ff9000;
  border-radius: 2px;
  font-size: 12px;
}
.page-cinema-cinema .show-item .price .vipPrice .icon {
  display: inline-block;
  color: #fff;
  background-color: #f90;
}
.page-cinema-cinema .show-item .price .vipPrice .num {
  display: inline-block;
  padding: 0 2px;
  color: #f90;
  background-color: #fff;
}
.page-cinema-cinema .show-item .price .extraDesc {
  margin-top: 5px;
  display: block;
  font-size: 11px;
  color: #999;
}
.page-cinema-cinema .show-item .button-block {
  width: 45px;
  margin-left: 2px;
  position: relative;
}
.page-cinema-cinema .show-item .button-block .button {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  height: 25px;
  line-height: 26px;
  font-size: 12px;
  border: 1px solid #f06762;
  border-radius: 50px;
  color: #f03d37;
  text-align: center;
}
.page-cinema-cinema .show-item .button-block .button.disable {
  color: #ccc;
  border-color: #e8e8e8;
}
.page-cinema-cinema .show-item .button-block .button.full {
  color: #666;
  border-color: #ccc;
}
.page-cinema-cinema .show-item .button-block .button.discount {
  color: #f90;
  border-color: #f90;
}
.page-cinema-cinema .tag-wrapper {
  margin: -12px 0 2px;
}
.page-cinema-cinema .tag-wrapper-other {
  margin-bottom: -12px;
}
.page-cinema-cinema .preShowTag,
.page-cinema-cinema .showTag,
.page-cinema-cinema .zeroFlag {
  color: #fff;
  display: inline-block;
  padding: 0 3px;
  height: 15px;
  line-height: 15px;
  font-size: 12px;
  border-radius: 2px;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transform-origin: left;
  transform-origin: left;
}
.page-cinema-cinema .zeroFlag {
  background-color: #a3cfd9;
}
.page-cinema-cinema .preShowTag,
.page-cinema-cinema .showTag {
  background-color: #ff7979;
  margin-right: -8px;
}
.page-cinema-cinema .activity-section .discount-tips,
.page-cinema-cinema .activity-section .vip-tips {
  margin-top: -1px;
  padding: 0 15px;
  height: 42px;
  line-height: 42px;
}
.page-cinema-cinema .activity-section .discount-tips a,
.page-cinema-cinema .activity-section .vip-tips a {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  color: #777;
}
.page-cinema-cinema .activity-section .discount-tips .label,
.page-cinema-cinema .activity-section .vip-tips .label {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  display: inline-block;
  background-color: #60b8e1;
  border-radius: 2px;
  font-size: 10px;
  line-height: 15px;
  height: 15px;
  width: 34px;
  text-align: center;
  color: #fff;
  margin-top: 13px;
  margin-right: 10px;
}
.page-cinema-cinema .activity-section .discount-tips .label-text,
.page-cinema-cinema .activity-section .vip-tips .label-text {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  color: #60b8e1;
  font-size: 12px;
}
.page-cinema-cinema .activity-section .discount-tips .process,
.page-cinema-cinema .activity-section .vip-tips .process {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  line-height: 42px;
  color: #999;
  font-size: 12px;
}
.page-cinema-cinema .activity-section .discount-tips .process:after,
.page-cinema-cinema .activity-section .vip-tips .process:after {
  display: inline-block;
  content: "";
  width: 7px;
  height: 7px;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.page-cinema-cinema .activity-section .vip-tips {
  margin-top: -1px;
  background-color: #fff5ea;
}
.page-cinema-cinema .activity-section .vip-tips .label {
  background-color: #ff941a;
}
.page-cinema-cinema .activity-section .vip-tips .label-text {
  color: #fa9600;
}
.page-cinema-cinema .activity-section .overlay {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.page-cinema-cinema .activity-section .activity-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding-bottom: 92px;
}
.page-cinema-cinema .activity-section .activity-container .close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  background: url()
    no-repeat 50%;
  background-size: 14px 14px;
}
.page-cinema-cinema .activity-section .activity-container .activity-title {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 15px;
  color: #333;
}
.page-cinema-cinema .activity-section .activity-container .link {
  display: block;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link:last-child
  .activity-item {
  background: none;
}
.page-cinema-cinema .activity-section .activity-container .link .activity-item {
  margin-left: 15px;
  padding: 13px 15px 12px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: relative;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link
  .activity-item
  .activity-tag {
  width: 19px;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link
  .activity-item
  .activity-tag
  span {
  text-align: center;
  display: inline-block;
  width: 19px;
  height: 18px;
  line-height: 18px;
  color: #fff;
  background-color: #f90;
  border-radius: 4px;
  font-size: 12px;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link
  .activity-item
  .tag-1
  span {
  background-color: #f90;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link
  .activity-item
  .tag-2
  span {
  background-color: #ff7979;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link
  .activity-item
  .tag-3
  span {
  background-color: #00c7b3;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link
  .activity-item
  .info {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  margin: 0 10px;
  overflow: hidden;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link
  .activity-item
  .info
  .tag {
  font-size: 14px;
  color: #333;
  height: 18px;
  line-height: 18px;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link
  .activity-item
  .info
  .desc {
  margin-top: 3px;
  font-size: 12px;
  color: #999;
  height: 16px;
  line-height: 16px;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link
  .activity-item
  .link-icon {
  width: 8px;
}
.page-cinema-cinema
  .activity-section
  .activity-container
  .link
  .activity-item
  .link-icon:after {
  position: absolute;
  top: 50%;
  margin-top: -8px;
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2px solid #ccc;
  border-top: 2px solid #ccc;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.page-cinema-cinema .show-wrap {
  background-color: #fff;
}
.page-cinema-cinema .date-nav {
  height: 45px;
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
}
.page-cinema-cinema .date-nav .date-item {
  display: inline-block;
  line-height: 45px;
  height: 45px;
  margin-left: 30px;
  text-align: center;
  font-size: 14px;
  color: #666;
}
.page-cinema-cinema .date-nav .date-item .date-hui {
  display: inline-block;
  color: #fff;
  padding: 0 4px;
  line-height: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  -webkit-transform: translateY(-1.5px);
  transform: translateY(-1.5px);
}
.page-cinema-cinema .date-nav .date-item .date-hui.normal {
  background-color: #f90;
}
.page-cinema-cinema .date-nav .date-item .date-hui.hide {
  display: none;
}
.page-cinema-cinema .date-nav .date-item .date-hui.mew {
  background-color: #ed1e24;
}
.page-cinema-cinema .date-nav .date-item.selected-date {
  color: #f03d37;
  position: relative;
}
.page-cinema-cinema .date-nav .date-item.selected-date:after {
  content: "";
  position: absolute;
  width: 110%;
  height: 2px;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #f03d37;
}
.page-cinema-cinema .date-nav .date-item:first-child {
  margin-left: 15px;
}
.page-cinema-cinema .date-nav .date-item:last-child {
  margin-right: 15px;
}
.page-cinema-cinema .no-seat {
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 230px;
  background-color: #f0f0f0;
}
.page-cinema-cinema .no-seat .icon {
  display: inline-block;
  margin: 50px auto 0;
  width: 77.5px;
  height: 71.5px;
}
.page-cinema-cinema .no-seat .icon.today-no-movie,
.page-cinema-cinema .no-seat .icon.today-no-show {
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/today-no-show.3f026db3.png)
    no-repeat 50%;
  background-size: contain;
}
.page-cinema-cinema .no-seat .text {
  margin-top: 12px;
  line-height: 1;
  font-size: 16px;
  color: #acacac;
}
.page-cinema-cinema .no-seat .next-date-button {
  margin: 20px auto 0;
  border-radius: 5px;
  width: 170px;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #f03d37;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #fff;
  text-align: center;
}
.page-cinema-cinema .recommend-title {
  color: #666;
  line-height: 44px;
  height: 44px;
  font-size: 13px;
  padding: 0 15px;
}
.page-cinema-cinema .recinema-item {
  line-height: 1.5;
  padding: 13px 15px 13px 0;
  margin-left: 15px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
.page-cinema-cinema .recinema-item .item-title {
  height: 23px;
  line-height: 23px;
  font-size: 16px;
  color: #000;
}
.page-cinema-cinema .recinema-item .item-title .item-price {
  padding-top: 9px;
  padding-left: 3px;
  font-size: 18px;
  color: #f03d37;
}
.page-cinema-cinema .recinema-item .item-title .item-price .price-text {
  margin-left: 3px;
  font-size: 11px;
}
.page-cinema-cinema .recinema-item .location-block {
  width: 100%;
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}
.page-cinema-cinema .recinema-item .location-block .addr {
  display: inline-block;
  width: 88.4%;
  vertical-align: middle;
}
.page-cinema-cinema .recinema-item .location-block .distance {
  margin-left: 5px;
  vertical-align: middle;
}
.page-cinema-cinema .recinema-item .label-block {
  margin-top: 4px;
  margin-bottom: 4px;
  overflow: hidden;
  font-size: 0;
}
.page-cinema-cinema .recinema-item .label-block div {
  position: relative;
  display: inline-block;
  padding: 0 3px;
  margin-right: 5px;
  height: 17px;
  line-height: 17px;
  border-radius: 2px;
  font-size: 12px;
}
.page-cinema-cinema .recinema-item .label-block .allowRefund,
.page-cinema-cinema .recinema-item .label-block .endorse,
.page-cinema-cinema .recinema-item .label-block .hallType,
.page-cinema-cinema .recinema-item .label-block .sell {
  color: #589daf;
  border: 1px solid #589daf;
}
.page-cinema-cinema .recinema-item .label-block .snack,
.page-cinema-cinema .recinema-item .label-block .vipTag {
  color: #f90;
  border: 1px solid #f90;
}
.page-cinema-cinema .recinema-item .discount-block {
  color: #999;
  margin-bottom: 4px;
}
.page-cinema-cinema .recinema-item .discount-block .discount-label {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 14px;
  background-size: 100% 100%;
  vertical-align: middle;
}
.page-cinema-cinema
  .recinema-item
  .discount-block
  .discount-label.platformActivityTag {
  background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/platformActivityTag.8d84dec2.png);
}
.page-cinema-cinema
  .recinema-item
  .discount-block
  .discount-label.cardPromotionTag {
  background-image: url();
}
.page-cinema-cinema
  .recinema-item
  .discount-block
  .discount-label.merchantActivityTag {
  background-image: url();
}
.page-cinema-cinema
  .recinema-item
  .discount-block
  .discount-label.couponPromotionTag {
  background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/couponPromotionTag.07e41bc9.png);
}
.page-cinema-cinema
  .recinema-item
  .discount-block
  .discount-label.starActivityTag {
  background-image: url();
}
.page-cinema-cinema .recinema-item .discount-block .discount-label-text {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  vertical-align: middle;
}
.component-show-food-list {
  padding: 0 15px;
  font-size: 15px;
  background-color: #fff;
}
.component-show-food-list header {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  color: #666;
  padding: 12px 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.component-show-food-list header > .title {
  color: #666;
  font-size: 15px;
}
.component-show-food-list section {
  padding-right: 15px;
  color: #333;
}
.component-show-food-list section .deal-item {
  padding: 15px 0;
  margin-bottom: -1px;
  overflow-y: hidden;
  -webkit-transition: height 0.2s linear;
  transition: height 0.2s linear;
  margin-right: -15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-size: 1px 1px;
  position: relative;
  height: 92px;
}
.component-show-food-list section .deal-item .deal-left {
  width: 92px;
  height: 92px;
  margin-right: 15px;
  background: #f0f0f0;
  position: relative;
}
.component-show-food-list section .deal-item .deal-left .card-tag {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  background-color: #fa5939;
  font-size: 12px;
  padding: 0 5px;
  color: #fff;
  border-bottom-right-radius: 2px;
}
.component-show-food-list section .deal-item .deal-left img {
  width: 100%;
  height: 100%;
}
.component-show-food-list section .deal-item .deal-right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.component-show-food-list section .deal-item .deal-right,
.component-show-food-list section .deal-item .deal-right .deal-base-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.component-show-food-list section .deal-item .deal-right .deal-base-info {
  flex-direction: column;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-base-info
  .deal-title {
  font-size: 14px;
  line-height: 18px;
  color: #333;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-base-info
  .deal-title
  .person-num {
  display: inline-block;
  vertical-align: top;
  margin-top: 1px;
  margin-right: 7px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 15px;
  height: 15px;
  background: #f90;
  border-radius: 2px;
  color: #fff;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-base-info
  .deal-vip-price
  > div {
  display: inline-block;
  margin-top: 12px;
  line-height: 15px;
  height: 15px;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transform-origin: left;
  transform-origin: left;
  margin-right: -16px;
  border: 1px solid #ff9000;
  border-radius: 2px;
  font-size: 12px;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-base-info
  .deal-vip-price
  .icon,
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-base-info
  .deal-vip-price
  .num {
  display: inline-block;
  padding: 0 2px;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-base-info
  .deal-vip-price
  .icon {
  color: #fff;
  background-color: #f90;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-base-info
  .deal-vip-price
  .num {
  color: #f90;
  background-color: #fff;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-base-info
  .sell-num {
  display: inline-block;
  position: absolute;
  bottom: 34px;
  right: 0;
  line-height: 16px;
  height: 16px;
  font-size: 12px;
  color: #999;
}
.component-show-food-list section .deal-item .deal-right .deal-buy-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-buy-info
  .deal-price
  .promotion-logo {
  font-size: 10px;
  line-height: 14px;
  color: #f90;
  padding: 0 4px;
  border: 1px solid #f90;
  border-radius: 2px;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-buy-info
  .deal-price
  .sell-price {
  color: #f03d37;
  font-size: 17px;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-buy-info
  .deal-price
  .sell-price
  .icon {
  font-size: 14px;
}
.component-show-food-list
  section
  .deal-item
  .deal-right
  .deal-buy-info
  .buy-btn {
  display: inline-block;
  padding: 0 8px;
  height: 27px;
  line-height: 27px;
  font-size: 12px;
  border-radius: 3px;
  color: #fff;
  background-color: #f03d37;
}
.component-show-food-list section .show-all-deal {
  line-height: 1rem;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  color: #777;
}
.component-show-food-list .border-t {
  background: url("")
    0 top repeat-x;
}
@media (-webkit-min-device-pixel-ratio: 2),
  (-webkit-min-device-pixel-ratio: 3) {
  .component-show-food-list .border-t {
    background-size: 1px 1px;
  }
}
.page-cinema-cinema .cinema-block {
  background-color: #fff;
}
.page-cinema-cinema .cinema-block .crumbs-nav {
  padding: 10px 0 0 15px;
  color: #777;
}
.page-cinema-cinema .cinema-block .cinema-info {
  position: relative;
  padding: 15px 100px 15px 15px;
}
.page-cinema-cinema .cinema-block .cinema-info .title {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: #333;
}
.page-cinema-cinema .cinema-block .cinema-info .location {
  margin-top: 2px;
  font-size: 13px;
  line-height: 18.5px;
  color: #999;
}
.page-cinema-cinema .cinema-block .cinema-info .location-icon {
  position: absolute;
  right: 0;
  top: 50%;
  width: 70px;
  height: 31px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}
.page-cinema-cinema .cinema-block .cinema-info .location-icon img {
  display: inline-block;
  width: 19px;
  height: 22px;
  margin-top: 5px;
}
.page-cinema-cinema {
  background-color: #f0f0f0;
}
.page-cinema-cinema .no-sell-cinema {
  background-color: #fff;
}
.page-cinema-cinema .no-sell-cinema .tip-text {
  color: #999;
  line-height: 45px;
  height: 45px;
  font-size: 13px;
  padding-right: 15px;
  margin-left: 15px;
}
.page-cinema-cinema .gap {
  height: 10px;
  background-color: #f0f0f0;
}
.myui-toast-mask {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.myui-toast-mask,
.myui-toast-nomask {
  position: fixed;
  z-index: 99999;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: initial;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
}
.myui-toast-nomask {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.myui-toast-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 12px 18px;
  max-width: 260px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 9px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  line-height: 19px;
  word-break: break-word;
  font-family: PingFangSC-Regular;
  box-sizing: border-box;
  letter-spacing: 1px;
}
.myui-toast-img.type-custom,
.myui-toast-img.type-fail,
.myui-toast-img.type-loading,
.myui-toast-img.type-success {
  width: 18px;
  height: 18px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 6px;
}
.myui-toast-img.type-fail {
  display: none;
  background-image: url("");
}
.myui-toast-img.type-success {
  background-image: url("");
}
.myui-toast-img.type-loading {
  background-image: url(https://p0.meituan.net/moviemachine/080350ea3109aab5e933ab5cb648526b16240.gif);
}
.myui-toast-content-seat {
  padding: 0 18px;
  border-radius: 19px;
  white-space: nowrap;
}
.myui-toast-content-seat .type-seat {
  width: 38px;
  height: 39px;
  vertical-align: -15px;
  margin-right: 8px;
}
.myui-toast-seat {
  width: 38px;
  height: 39px;
}
.myui-toast-text-seat {
  line-height: 39px;
}
.myui-toast-content-seat-tips {
  padding: 30px 21px;
  display: inline-block;
  width: 146px;
}
.myui-toast-content-seat-tips .type-seat-tips {
  width: 104px;
  height: 24px;
  display: block;
  margin-bottom: 15px;
}
.myui-toast-seat-tips {
  width: 104px;
  height: 24px;
}
.myui-toast-custom {
  width: 18px;
  height: 18px;
}
.popup-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100000;
  position: fixed;
}
.popup-alert {
  min-width: 280px;
  background: #fff;
  border-radius: 15px;
  position: fixed;
  margin: auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  letter-spacing: 0;
  text-align: center;
  z-index: 10000002;
}
.popup-alert .popup-container {
  padding: 21px;
}
.popup-alert .popup-container .popup-title .title-text {
  font-size: 17px;
  font-family: PingFangSC-Medium;
  color: #333;
}
.popup-alert .popup-container .popup-title .title-icon {
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
}
.popup-alert .popup-container .popup-title .title-icon[data-icon="big"] {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/success-big.eaffcae2.png);
}
.popup-alert .popup-container .popup-title .title-icon[data-icon="small"] {
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  background-image: url();
}
.popup-alert .popup-container .popup-title .close {
  position: absolute;
  right: 21px;
  top: 21px;
  color: #000;
  width: 13px;
  height: 13px;
  background-size: 13px 13px;
  background-image: url();
  background-repeat: no-repeat;
  background-position: 50%;
}
.popup-alert .popup-container .popup-content {
  margin-top: 6px;
  font-size: 14px;
  line-height: 24px;
  font-family: PingFangSC-Regular;
  color: #333;
}
.popup-alert .popup-buttons {
  font-size: 17px;
  height: 48px;
  line-height: 48px;
}
.popup-alert .popup-buttons a {
  float: left;
  width: 100%;
  height: 100%;
  letter-spacing: 1px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2%;
}
.popup-alert .popup-buttons a:active {
  background: rgba(0, 0, 0, 0.03);
}
.popup-alert .popup-buttons a.cbtn {
  color: #333;
  font-family: PingFangSC-Regular;
}
.popup-alert .popup-buttons a.dbtn {
  color: #f03d37;
  font-family: PingFangSC-Medium;
}
.popup-alert .popup-buttons .more-button {
  width: 50%;
}
.border-1px-l,
.border-1px-t {
  position: relative;
}
.border-1px-l:after,
.border-1px-t:after {
  background: rgba(0, 0, 0, 0.1);
}
.flow-control-disabled {
  color: #ddd;
  border-bottom-right-radius: 15px;
}
.popup-buttons a.flow-control-disabled:active {
  background: #fff;
}
.container-2FSht {
  z-index: 999999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
}
.waiting-2zC0v {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #fff;
}
.image-RBO2T {
  display: block;
  width: 107px;
  height: 98px;
  margin: 0 auto;
}
.progress-1YW2Q {
  display: block;
  margin-top: 24px;
  width: 100%;
}
.text-3XG-J {
  margin-top: 20px;
  line-height: 22px;
  text-align: center;
  color: #333;
  font-size: 13px;
}
@-webkit-keyframes img_animation-1P4pK {
  0% {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/waiting1.e3502653.png);
  }
  to {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/waiting2.7b10b13c.png);
  }
}
@keyframes img_animation-1P4pK {
  0% {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/waiting1.e3502653.png);
  }
  to {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/waiting2.7b10b13c.png);
  }
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 1px solid #ccc;
  border-top: none;
  border-left: none;
  position: relative;
  left: -2px;
}
.image-fade-in {
  animation: imageanimation 1s forwards;
  -webkit-animation: imageanimation 1s forwards;
}
@keyframes imageanimation {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes imageanimation {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.border-1px,
.border-1px-b,
.border-1px-l,
.border-1px-r,
.border-1px-radius,
.border-1px-t {
  position: relative;
  border: none;
}
.border-1px:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 200%;
  width: 200%;
  border: 1px solid #d8d8d8;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.border-1px-b:after {
  bottom: 0;
}
.border-1px-b:after,
.border-1px-t:after {
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  content: "";
  background: #d8d8d8;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.border-1px-t:after {
  top: 0;
}
.border-1px-l:after {
  left: 0;
}
.border-1px-l:after,
.border-1px-r:after {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  content: "";
  background: #d8d8d8;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.border-1px-r:after {
  right: 0;
}
.border-1px-radius:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #d8d8d8;
  box-sizing: border-box;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border-radius: 18px;
}
.mb-outline-b {
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/repeat-x-bottom-outline.88c9645d.png)
    0 bottom repeat-x;
}
.mb-outline-t {
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/repeat-x-top-outline.fb6ee366.png)
    0 top repeat-x;
}
.mb-outline-tb {
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/repeat-x-top-outline.fb6ee366.png)
      0 top repeat-x,
    url(https://obj.pipi.cn/festatic/fe-trade/public/img/repeat-x-bottom-outline.88c9645d.png)
      0 bottom repeat-x;
}
.mb-line-b {
  background: url()
    0 bottom repeat-x;
}
.mb-line-t {
  background: url()
    0 top repeat-x;
}
.mb-line-tb {
  background: url()
      0 top repeat-x,
    url()
      0 bottom repeat-x;
}
.mb-line-l {
  background: url()
    left 0 repeat-y;
}
.mb-line-r {
  background: url()
    right 0 repeat-y;
}
.mb-line-lr {
  background: url()
      left 0 repeat-y,
    url()
      right 0 repeat-y;
}
.mb-line-all {
  background: url()
      0 top repeat-x,
    url()
      right 0 repeat-y,
    url()
      0 bottom repeat-x,
    url()
      left 0 repeat-y;
}
@media (-webkit-min-device-pixel-ratio: 2),
  (-webkit-min-device-pixel-ratio: 3) {
  .mb-line-all,
  .mb-line-b,
  .mb-line-l,
  .mb-line-lr,
  .mb-line-r,
  .mb-line-t,
  .mb-line-tb,
  .mb-outline-b,
  .mb-outline-t,
  .mb-outline-tb {
    background-size: 1px 1px;
  }
}
@font-face {
  font-family: base_icon;
  src: url(//s0.meituan.net/bs/?f=myfe%2Fcanary%3A%2Fstatic%2Fdeploy%2Ffonts%2Fbase14.woff)
      format("woff"),
    url(//s0.meituan.net/bs/?f=myfe%2Fcanary%3A%2Fstatic%2Fdeploy%2Ffonts%2Fbase14.otf)
      format("opentype");
}
@font-face {
  font-family: canary_icon;
  src: url(//s0.meituan.net/bs/?f=myfe%2Fcanary%3A%2Fstatic%2Fdeploy%2Ffonts%2Fmyfont.woff)
      format("woff"),
    url(//s0.meituan.net/bs/?f=myfe%2Fcanary%3A%2Fstatic%2Fdeploy%2Ffonts%2Fmyfont.ttf),
    url(//s0.meituan.net/bs/?f=myfe%2Fcanary%3A%2Fstatic%2Fdeploy%2Ffonts%2Fmyfont.eot);
}
.text-icon {
  display: inline-block;
  font-family: base_icon;
  font-style: normal;
  vertical-align: middle;
}
body,
html {
  height: 100%;
}
html {
  font-size: 50px;
}
@media (min-width: 414px) {
  html {
    font-size: 51.5px;
  }
}
@media (max-width: 375px) {
  html {
    font-size: 50px;
  }
}
@media (max-width: 360px) {
  html {
    font-size: 45px;
  }
}
@media (max-width: 320px) {
  html {
    font-size: 42px;
  }
}
body {
  color: #777;
  font-size: 14px;
  font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a,
a:visited {
  color: inherit;
}
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
::-webkit-scrollbar {
  height: 0 !important;
}
button,
input,
select,
textarea {
  outline: none;
  resize: none;
}
a,
button,
div {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.loader-1kZfS {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.loaderImg-tOmcI {
  position: relative;
  width: 32px;
  height: 32px;
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/red-circle.fa74aa31.png)
    no-repeat;
  background-size: 100% 100%;
  -webkit-transform: rotate 1turn;
  transform: rotate 1turn;
  -webkit-animation: rotation-3nMlR 1s linear infinite;
  animation: rotation-3nMlR 1s linear infinite;
}
@-webkit-keyframes rotation-3nMlR {
  0% {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
  }
}
@keyframes rotation-3nMlR {
  0% {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
  }
}
.innerLoading-14-G7 {
  display: inline-block;
  position: relative;
  top: -32px;
  left: 0;
  width: 32px;
  height: 32px;
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/cat.6e48e4e6.png)
    no-repeat;
  background-size: 100% 100%;
}
@-webkit-keyframes loader-1kZfS {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
@keyframes loader-1kZfS {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
figcaption,
figure,
main {
  display: block;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: initial;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: initial;
  -webkit-text-decoration-skip: objects;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: inherit;
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
dfn {
  font-style: italic;
}
mark {
  background-color: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: initial;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
audio,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
img {
  border-style: none;
}
svg:not(:root) {
  overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  display: inline-block;
  vertical-align: initial;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details,
menu {
  display: block;
}
summary {
  display: list-item;
}
canvas {
  display: inline-block;
}
[hidden],
template {
  display: none;
}
.page-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 50px;
  text-align: center;
  color: #fff;
  background: #e54848;
}
.page-header-title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  line-height: 50px;
  font-size: 18px;
  font-weight: 400;
}
.page-header-left,
.page-header-right {
  width: 50px;
  height: 100%;
  line-height: 50px;
}
.page-header-back {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  position: relative;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.page-header-back:before {
  content: "";
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.page-header {
  display: none;
}
.page-header.canary-theme,
.page-header.hsbc-theme,
.page-header.huawei-theme,
.page-header.hwfastapp-theme,
.page-header.ICBC-theme {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background-color: #e54848;
}
.page-header.dpmweb-theme,
.page-header.mdianping-theme {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background-color: #f63;
}
.page-header.imeituan-theme {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background-color: #f03d37;
}
.root-result .am-result .am-result-pic {
  width: 105px;
  height: 120px;
  margin: 0 auto;
  line-height: 120px;
  background-size: 105px 120px;
}
.root-result .am-result .spe {
  width: 105px;
  height: 120px;
}
.root-result .am-result .sub-title {
  color: #888;
  font-size: 14px;
  padding: 30px 0 18px;
  margin-left: 15px;
}
.root-result .am-result .am-result-message,
.root-result .am-result .am-result-title {
  font-size: 18px;
  color: #888;
}
.root-result .am-result .am-result-message .link,
.root-result .am-result .am-result-title .link {
  font-size: 16px;
  text-decoration: underline;
  margin: 0 5px;
}
.root-result .phone {
  font-size: 12px;
  display: inline-block;
  width: 100%;
  text-align: center;
  margin: 15px 0;
  color: #999;
}
.root-login-button {
  padding: 0;
  border: 0;
  margin-left: 0.17rem;
  color: #1890ff;
  background-color: initial;
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
}
.root-links {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
</style>